<template>
    <div>
      <div ref="initRef"></div>
      <!-- 文章编辑界面 -->
      <Window :show="windowConfig.show"
              :buttons="windowConfig.buttons"
              @close="closeWindow">
        <el-form :model="noticeFormData"
                 :rules="rules"
                 ref="noticeFormRef">
          <el-form-item prop="title">
              <div class="title-input">
                  <el-input placeholder="请输入公告标题"
                            v-model="noticeFormData.title">
                  </el-input>
              </div>
              <!-- <el-button type="primary" @click="tagsEdit">编辑标签</el-button> -->
          </el-form-item>
          <el-form-item prop="content">
              <div :style="{'windth':'100%'}">
                  <Editor :height="editorHeight"
                          v-model="noticeFormData.content"></Editor>
              </div>
          </el-form-item>
        </el-form>
      </Window>
    </div>
  </template>
  
  <script>
  import { columns } from 'element-plus/es/components/table-v2/src/common.mjs';
  import Window from '../../components/Window.vue';
  import { getCurrentInstance, nextTick, reactive } from 'vue';
  export default {
    components: { Window },
    data(){
      return{
          proxy: getCurrentInstance().proxy,
          editorHeight: window.innerHeight - 60 - 20 - 30 - 50 - 100 - 50,
          noticeFormRef:null,
          $refs:{
            initRef:null,
          },
          noticeFormData:{
          },
          windowConfig:{
            show:false,
            buttons:[
              {
                type:"danger",
                text:"发布",
                click: (e) => {
                    console.log("准备发布");
                    this.submitNotice();
                }
              }
            ]
          },
      }
    },
    methods:{
      init(){
        this.windowConfig.show = true;
        nextTick(() => {
          if(this.$refs.noticeFormRef){
            this.$refs.noticeFormRef.resetFields();
          }
          this.noticeFormData = {
            content:'',
            title:'',
          };
        })
      },
  
      //发送编辑公告
      async submitNotice(){
        if(!!this.noticeFormData.title && !(this.noticeFormData.content.trim() === '<p><br></p>')){
          try{
            let result = await this.proxy.Request({
              url:"/notices/create",
              method:'POST',
              data:{
                title: this.noticeFormData.title,
                content: this.noticeFormData.content,
              },
              headers:{
                'Content-Type':'application/json'
              }
            });
            if(!result){
              return;
            }
            this.proxy.Message.success("发布成功");
            this.closeWindow();
          }catch(error){
            console.error(error)
          }
            
        }else{
          console.log("请编辑公告")
        }
      },
  
      //关闭编辑窗口
      closeWindow(){
        this.windowConfig.show = false;
        this.$emit("callback");
      },
  
    },
    mounted(){
      this.$nextTick(() => {
        this.initRef = this.$refs.initRef;  
      })
    }
  }
  </script>
  
  <style>
  
  </style>